main {
  width: auto;
  padding: 52px 29px;
  display: flex;
  flex-wrap: wrap;
  border: solid 1px #fff;
  
}
  div {
      margin: 10px;
    background-color: #f6e58d;
    width: 100px;
    height: 100px;
  }

  /* 全边框 */
.linear-color-border:nth-child(1) {
  border: 10px solid transparent;
  border-image: linear-gradient(#F80, #2ED) 20 20;
}

/* 底部 */
.linear-color-border:nth-child(2) {
  border-bottom: 10px solid transparent;
  border-image: linear-gradient(to right, rgba(255,0,0, 1), rgba(255,255,0,1)) 20 20;
}



  /* 全边框 不支持border-radius */
  .linear-color-border:nth-child(3) {
    border: 4px solid transparent;
    border-image-source: linear-gradient(to right, #8f41e9, #578aef);
    border-image-slice: 1;
  }

  /* 巧妙的使用这个background 属性  且支持 border radius*/
  .linear-color-border:nth-child(4) {
    border: 4px solid transparent;
    border-radius: 16px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: 
    linear-gradient(to right, #f6e58d, #f6e58d),
     linear-gradient(90deg, #8F41E9, #578AEF);
  }
  /* background-clip属性指定背景绘制区域。
      border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
      padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
      content-box	背景绘制在内容方框内（剪切成内容方框）。

      background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域.

      
  
  */